<template>
  <div class="samll-upload">
    <template v-if="type == 'video'">
     <div class="samll-upload-box">
      <div class="samll-upload-box-item" v-for="(item, index) in imgList" :key="index">
        <div class="samll-upload-box-wrap" v-if="imgList.length > 0">
          <div class="samll-upload-box-delimgpos" @click="DeletIndexImg(index)"></div>
          <img class="imageItem" :src="item.pic" lazy-load="true" @click="showVideo(item)"/>
        </div>
      </div>
      <div  class="samll-upload-box-item uploadImage" v-if="imgList.length < maxLength" @click="UploadVideoBtn">
        <div class="uploadIcon">
          <img :src="typeImage ? typeImage : defaultSrc"/>

        </div>
        <div class="uploadTextBig">上传视频</div>
        <!-- <div class="uploadTextSmall">(最多上传5张)</div> -->
      </div>
    </div>

    </template>
    <template v-else-if="type == 'image'">
    <div class="samll-upload-box" v-if="!isChangeStyle">
        <div class="img-wrap" v-if="imgList.length > 0 && noShowImg">
          <template v-if="previewSize">
            <div class="samll-upload-box-item previewSize" v-for="(item, index) in imgList" :key="index">
                <div class="samll-upload-box-delimgpos" @click="DeletIndexImg(index)"></div>
                <img class="imageItem" :src="item" lazy-load="true" @click="RefundPreviewImage(item)"/>
            </div>
          </template>
          <template v-else>
            <div class="samll-upload-box-item" :class="isUploadSfz ? 'sfz' : isUploadCzPz ? 'scpz':''" v-for="(item, index) in imgList" :key="index">
                <div class="samll-upload-box-delimgpos" @click="DeletIndexImg(index)"></div>
                <img class="imageItem" :src="item" lazy-load="true" @click="RefundPreviewImage(item)"/>
            </div>
          </template>

        </div>
        <div class="img-wrap1" v-if="imgList.length < maxLength">

            <div v-if="isUploadSfz" class="samll-upload-box-item uploadImage" :class="previewSize ? 'previewSize' : 'sfz'" @click="UploadImgBtn">
                <img :src="sfzBg" />
            </div>
            <div v-else-if="isUploadCzPz" class="samll-upload-box-item uploadImage scpz" @click="UploadImgBtn">
              <img :src="sfzBg" />
            </div>
            <div v-else class="samll-upload-box-item uploadImage" @click="UploadImgBtn">
              <div class="uploadIcon">
                <img :src="typeImage ? typeImage : defaultSrc"/>
              </div>
              <div class="uploadTextBig">上传图片</div>
              <!-- <div class="uploadTextSmall">(最多上传5张)</div> -->
            </div>
        </div>
    </div>
    <div class="samll-upload-box" v-else>
      <template v-if="previewSize">
        <div class="samll-upload-box-item previewSize" v-for="(item, index) in imgList" :key="index">
        <div class="samll-upload-box-previewSize" v-if="imgList.length > 0">
          <div class="samll-upload-box-delimgpos" @click="DeletIndexImg(index)"></div>
          <img class="imageItem" :src="item" lazy-load="true" @click="RefundPreviewImage(item)"/>
        </div>
      </div>
      </template>
      <template v-else-if="noShowImg">
      <div class="samll-upload-box-item" :class="isUploadSfz ? 'sfz' : isUploadCzPz ? 'scpz':''" v-for="(item, index) in imgList" :key="index">
        <div class="samll-upload-box-wrap" v-if="imgList.length > 0">
          <div class="samll-upload-box-delimgpos" @click="DeletIndexImg(index)"></div>
          <img class="imageItem" :src="item" lazy-load="true" @click="RefundPreviewImage(item)"/>
        </div>
      </div>
      </template>
      <div v-if="imgList.length < maxLength && isUploadSfz" class="samll-upload-box-item uploadImage" :class="previewSize ? 'previewSize' : 'sfz'" @click="UploadImgBtn">
          <img :src="sfzBg" />
      </div>
      <div v-else-if="imgList.length < maxLength && isUploadCzPz" class="samll-upload-box-item uploadImage scpz" @click="UploadImgBtn">
        <img :src="sfzBg" />
      </div>
      <div v-else-if="imgList.length < maxLength && !isUploadSfz && !isUploadCzPz" class="samll-upload-box-item uploadImage" :style="noShowImg ? '':'margin-right: 0'" @click="UploadImgBtn">
        <div class="uploadIcon">
          <img :src="typeImage ? typeImage : defaultSrc"/>
        </div>
        <div class="uploadTextBig">上传图片</div>
        <!-- <div class="uploadTextSmall">(最多上传5张)</div> -->
      </div>
    </div>
    </template>
  </div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'

export default Vue.extend({
  props: {
    type: {
      type: String,
      default: 'image'
    },
    maxLength: {
      type: Number,
      default: 5
    },
    imageList: {
      type: Array,
      default: () => []
    },
    isUploadCzPz: { // 判断是否是上传凭证
      type: Boolean,
      default: false
    },
    // TODO 判断是否是上传身份证 营业执照
    isUploadSfz: {
      type: Boolean,
      default: false
    },
    sfzBg: {
      type: String,
      default: ''
    },
    isChangeStyle: { // 上传图片超过4张
      type: Boolean,
      default: false
    },
    noShowImg: {
      type: Boolean,
      default: true
    },
    typeImage: {
      type: String,
      default: ''
    },
    previewSize: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgList: [],
      ChangeImgLen: 5,
      defaultSrc: 'https://img.wifenxiao.com/unisapp/order/camera.png'
    }
  },
  watch: {
    imageList(val) {
      this.imgList = val
    }
  },
  mounted() {
    this.imgList = this.imageList || []
    // console.log(this.imgList,this.imageList,'imglist')
    this.ChangeImgLen = this.maxLength
  },
  beforeDestroy() {
    this.imgList = []
  },
  methods: {
    showVideo(item) {
      this.$emit('showVideo', item)
    },
    // 视频
    UploadVideoBtn() {
      if (this.imgList.length >= this.maxLength) {
        wx.showModal({
          title: '提示',
          content: `最多上传${this.maxLength}张图片`,
          showCancel: false,
          success: (res) => {

          }
        })
        return false
      }
      let mediaObj = {
        count: 1,
        mediaType: ['video'],
        sourceType: ['camera', 'album'],
        sizeType: ['original', 'compressed'],
        camera: 'back',
      }
      small.wxUploadMediaVideo(mediaObj).then(data => {
        let imgList = this.imgList
        imgList = imgList.concat(data)
        this.imgList = imgList
        const imgLen = imgList.length
        this.ChangeImgLen = this.maxLength - imgLen
        this.$emit('changeImgList', this.imgList)
      })
    },
    /**
     * 上传图片
     */
    UploadImgBtn() {
      if (this.imgList.length >= this.maxLength) {
        wx.showModal({
          title: '提示',
          content: `最多上传${this.maxLength}张图片`,
          showCancel: false,
          success: (res) => {

          }
        })
        return false
      }
      small.wxUploadFile(this.ChangeImgLen).then((data) => {
        let imgList = this.imgList

        imgList = imgList.concat(data)
        // 当操作涉及到多张图片的时候这里截取到前5张
        // if (imgList.length > 5) {
        //   imgList = imgList.splice(0, 5)
        // }

        this.imgList = imgList

        const imgLen = imgList.length
        this.ChangeImgLen = this.maxLength - imgLen
        this.$emit('changeImgList', this.imgList)
      })
    },
    /**
     * 删除上传的图片
     */
    DeletIndexImg(index) {
      const imgList = this.imgList

      imgList.splice(index, 1)

      this.imgList = imgList
      const imgLen = imgList.length
      this.ChangeImgLen = this.maxLength - imgLen
      this.$emit('changeImgList', this.imgList)
    },

    /**
     * 预览图片
     */
    RefundPreviewImage(current) {
      wx.previewImage({
        current,
        urls: this.imgList
      })
    }
  }
})
</script>

<style lang="scss">
.samll-upload {
    &-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top:20px;
        align-content: center;
        .img-wrap {
          display: flex;
          flex-wrap: wrap;
          .imageItem{
            width: 100%;
            height: 100%;
          }
        }
        &-item {
            width: 157px;
            height: 157px;
            margin-right: 20px;
            margin-bottom: 20px;
            position: relative;
            &.scpz {
              width: 650px;
              height: 340px;
            }
            &.sfz {
              width: 480px;
              height: 270px;
            }
            &.previewSize {
              margin: 0;
              width: 100%;
              height: 100%;
            }
        }
        &-wrap {
          width: 157px;
          height: 157px;
          position: relative;
        }
        &-previewSize {
          width: 100%;
          height: 100%;
          position: relative;
        }
        &-delimgpos {
            width: 34px;
            height: 34px;
            background-color: #fff;
            border-radius: 50%;
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/icon_close.png');
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            right: -16px;
            top: -16px;
            z-index: 10;
        }
    }
    .uploadImage{
        width: 157px;
        height: 157px;
        border:2px dashed rgba(191,191,191,1);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &.scpz {
          width: 650px;
          height: 340px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &.sfz {
          width: 480px;
          height: 270px;
          border: none;
          img {
            width: 480px;
            height: 270px;
          }
        }
        &.previewSize {
          width: 100%;
          height: 100%;
          border: none;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .uploadIcon{
            width: 38px;
            height: 38px;
            margin-bottom: 17px;
        }
        .uploadTextBig,
        .uploadTextSmall{
            color: #949494;
            font-size: 24px;
        }
    }
}
</style>
